<script setup>
import { getLxPresentList, deleteLxPresent, deleteLxPMultiple } from '@/api/question'
import { ref, onMounted, computed } from 'vue'
import Option from './option.vue'
import { ElMessage } from 'element-plus'

// 表格展示数据
const lainxiList = ref([])
// 查询表单是否展示
const filterState = ref(true)
// 查询表单“收起”、“展开”
const isExpand = ref(false)
// 查询表单数据源
const formData = ref({
  page: 1,
  size: 10
})
const dateRange = ref([])
// 分页器total
const showDataTotal = ref()
const getLianxiData = async () => {
  if (dateRange.value.length) {
    //赋值
    formData.value.startDate = dateRange.value[0]
    formData.value.endDate = dateRange.value[1]
  }
  try {
    // Object.assign({}, formData, startDate, endDate)

    const r = await getLxPresentList(formData.value)
    console.log(r)
    if (r.data.code == 200) {
      lainxiList.value = r.data.data.data
      showDataTotal.value = r.data.data.total
      ElMessage({
        type: 'success',
        message: '获取列表成功'
      })
    } else {
      ElMessage.error(r.data.msg)
    }
  } catch {
    ElMessage.error('请稍后再试')
  }
}
onMounted(() => {
  getLianxiData()
})
// 分页
const onSizeChange = (val) => {
  getLianxiData()
}
const onCurrentChange = (val) => {
  getLianxiData()
}
// 搜索
const onSearch = () => {
  getLianxiData()
}
// 重置
const onReset = () => {
  formData.value = {
    page: 1,
    size: 10
  }
  getLianxiData()
}
// 删除
const deleteLianxiFn = async (id) => {
  try {
    console.log(id)
    const r = await deleteLxPresent(id)
    if (r.data.code == 200) {
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getLianxiData()
    } else {
      ElMessage.error(r.data.msg)
    }
  } catch {
    ElMessage.error('请稍后再试')
  }
}
// 批量删除(后端实现)
const deleteMultipleArr = ref([])
const deleteMultiple = (val) => {
  // 确认哪些数据被删除
  const arr = []
  val.forEach((item) => {
    arr.push(item.id)
  })
  deleteMultipleArr.value = arr
}
const deleteMultipleFn = async () => {
  // 批量删除
  try {
    const r = await deleteLxPMultiple(deleteMultipleArr.value)
    if (r.data.code == 200) {
      //成功
      ElMessage({
        type: 'success',
        message: '批量删除成功'
      })
      //重新请求表格数据
      getLianxiData()
    } else {
      ElMessage.error(r.data.msg)
    }
  } catch {
    ElMessage.error('请稍后再试')
  }
}
// 用户新增||编辑传参
const optionRef = ref()
const onOption = (row) => {
  optionRef.value.state = true
  Object.assign(optionRef.value.formData, row)
}
</script>
<template>
  <div>
    <!-- 查询 -->
    <div v-if="filterState">
      <el-form :inline="true" :model="formData">
        <el-form-item label="问卷名称:">
          <el-input placeholder="请输入问卷名称" v-model="formData.name" />
        </el-form-item>
        <el-form-item label="起止日期:">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            :size="size"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">
            <span class="iconfont icon-sousuo"></span>搜索
          </el-button>
          <el-button type="default" @click="onReset"> 重置 </el-button>
          <!-- <el-button type="primary" link @click="isExpand = !isExpand">
            {{ isExpand ? '收起' : '展开' }}
            <el-icon>
              <ArrowUp v-if="isExpand" />
              <ArrowDown v-else />
            </el-icon>
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <!-- 新增、批量删除等按钮 -->
    <el-row style="margin-bottom: 2vh">
      <el-col :span="12">
        <el-button type="primary" @click="onOption">
          <el-icon><Plus /></el-icon>新增</el-button
        >
        <el-popconfirm title="确定删除吗?" @confirm="deleteMultipleFn">
          <template #reference>
            <el-button :disabled="!deleteMultipleArr.length" type="danger"
              ><el-icon><Delete /></el-icon>批量删除
            </el-button>
          </template>
        </el-popconfirm>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table :data="lainxiList" @selection-change="deleteMultiple" :border="true">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="60px" align="center">
        <template #default="scope">
          <span>{{ (formData.page - 1) * formData.size + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column property="name" label="礼品名称" align="center" />
      <el-table-column property="price" label="礼品价格" align="center" />
      <!-- <el-table-column property="level" label="礼品等级" align="center" /> -->
      <el-table-column property="level" label="礼品等级" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.rank === '一级'" type="warning">一级</el-tag>
          <el-tag v-if="scope.row.rank === '二级'" type="info">二级</el-tag>
          <el-tag v-if="scope.row.rank === '三级'" type="primary">三级</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="startDate" label="起始日期" align="center" />
      <el-table-column property="endDate" label="截至日期" align="center" />
      <el-table-column property="date" label="创建日期" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <!-- scope.row 代表 当前这一整条数据  scope.$index 代表索引值 -->
          <el-button size="small" @click="onOption(scope.row)"
            ><el-icon><Edit /></el-icon>编辑</el-button
          >
          <el-popconfirm title="确定删除吗?" @confirm="deleteLianxiFn(scope.row.id)">
            <template #reference>
              <el-button size="small" type="danger"
                ><el-icon><Delete /></el-icon>删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div style="text-align: center; display: ruby-text; margin-top: 1vh">
      <el-pagination
        v-model:current-page="formData.page"
        v-model:page-size="formData.size"
        background
        layout="total, jumper, prev, pager, next, sizes"
        :total="showDataTotal"
        :page-sizes="[10, 20, 30, 40, 100]"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
  <Option ref="optionRef" @flush="getLianxiData"></Option>
</template>
